<template>
  <div class="home" v-back="color">
    <button v-back="'red'" @click="cut('red')">红色</button>
    <button v-back="'green'" @click="cut('green')">绿色</button>
    <input type="text" v-focus>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref,getCurrentInstance } from 'vue';
export default {
  name: 'Home',
  components: {

  },
  setup(props) {
    const { proxy } = getCurrentInstance(); 
    proxy.$Test();
    // proxy.$axios.
    const color = ref('');
    const cut = (val) => {
       color.value = val;
       console.log(color);
    }
    return {
      cut,
      color
    }
  },
  directives:{
    back:{
      beforeUpdate(el,binding,vnode,prevVNode){
        //  console.log(el);
        //  console.log(binding);
        //  console.log(vnode);
        el.style.background = binding.value;
      }
    }
  }
}
</script>
